<template>
  <div>
    <router-view></router-view>
    <div class="Extensiona1">
      <el-button type="primary" round>核心企业授信申请</el-button>
    </div>
    <div class="Extensiona2">
      <select name="" id="">
        <option value="" v-for="(v, i) in text" :key="i">{{ v.title }}</option>
      </select>
      <input type="text" size="22" placeholder="请输入要查询的核心企业名称" />
      <select name="" id="">
        <option value="" v-for="(v, i) in duoxuan" :key="i">
          {{ v.title }}
        </option>
      </select>
      <button>查询</button>
      <button>重置</button>
      <div class="Extensiona3">
        <div class="Extensiona4" v-for="(v, i) in xuhao" :key="i">
          <!-- {{ v.caCreditapprovalid }}
        {{}} -->
          <div class="Extensiona5">
            {{ v.tetle }}
            <p>{{ v.num }}</p>
            <p>{{ v.num2 }}</p>
            <p>{{ v.num3 }}</p>
            <p>{{ v.num4 }}</p>
            <p>{{ v.name }}</p>
            <p>{{ v.name1 }}</p>
            <p>{{ v.name2 }}</p>
            <p>{{ v.name3 }}</p>
            <p>{{ v.code }}</p>
            <p>{{ v.code1 }}</p>
            <p>{{ v.code2 }}</p>
            <p>{{ v.code3 }}</p>
            <p>{{ v.money1 }}</p>
            <p>{{ v.money2 }}</p>
            <p>{{ v.money3 }}</p>
            <p>{{ v.money4 }}</p>
            <p>{{ v.worker1 }}</p>
            <p>{{ v.worker2 }}</p>
            <p>{{ v.worker3 }}</p>
            <p>{{ v.worker4 }}</p>
            <p>{{ v.zhuangtai1 }}</p>
            <p>{{ v.zhuangtai2 }}</p>
            <p>{{ v.zhuangtai3 }}</p>
            <p>{{ v.zhuangtai4 }}</p>
            <p>{{ v.time1 }}</p>
            <p>{{ v.time2 }}</p>
            <p>{{ v.time3 }}</p>
            <p>{{ v.time4 }}</p>
          </div>
        </div>
        <div class="icon">
          <div class="Extensiona6">
            <el-icon @click="fun()"><View /></el-icon>
          </div>
          <div class="Extensiona7">
            <el-icon @click="funn()"><Promotion /></el-icon>
          </div>
          <div class="Extensiona8">
            <el-icon @click="fun()"><View /></el-icon>
          </div>
          <div class="Extensiona9">
            <el-icon @click="funn()"><Promotion /></el-icon>
          </div>
          <div class="Extensiona10">
            <el-icon @click="fun()"><View /></el-icon>
          </div>
          <div class="Extensiona11">
            <el-icon @click="funn()"><Promotion /></el-icon>
          </div>
          <div class="Extensiona12">
            <el-icon @click="fun()"><View /></el-icon>
          </div>
          <div class="Extensiona13">
            <el-icon @click="funn()"><Promotion /></el-icon>
          </div>
        </div>
      </div>
      <div class="Extensiona14">
        <span>共22页</span>
        <div class="Extensiona15">
          5条/页
          <select name="" id="">
            <option value=""></option>
          </select>
        </div>
        <button>
          <el-icon><ArrowLeft /></el-icon>
        </button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>
          <el-icon><ArrowRight /></el-icon>
        </button>
        <span>前往</span>
        <button>5</button>页
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import service from "@/apis/cml";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
// const xuhao = ref([]);
onMounted(async () => {
  var res = await service.ExtensionaView.caCredit_approval();
  console.log(res.data.data);
  // xuhao.value = res.data.data;
});
let router = useRouter();

let fun = () => {
  router.push("/views/extension/Eyes");
};
let funn = () => {
  ElMessageBox.alert("是否提交进行申请", {
    confirmButtonText: "OK",
    callback: (action: Action) => {
      ElMessage({
        type: "info",
        message: "提交成功",
      });
    },
  });
};

const value = ref("");
const text = [
  {
    title: "企业名称",
  },
  {
    title: "社会信用代码",
  },
];
const duoxuan = [
  {
    title: "全部",
  },
  {
    title: "待提交",
  },
  {
    title: "已处理",
  },
];
const xuhao = [
  {
    tetle: "序号",
    num: 1,
    num2: 2,
    num3: 3,
    num4: 4,
  },
  {
    tetle: "企业名称",
    name: "ABC有限公司",
    name1: "CEF有限公司",
    name2: "CND有限公司",
    name3: "CDK有限公司",
  },
  {
    tetle: "社会信用代码",
    code: "12345678",
    code1: "12345678",
    code2: "098765432",
    code3: "567809876543",
  },
  {
    tetle: "注册资本",
    money1: "10000000",
    money2: "234345",
    money3: "100023450000",
    money4: "234",
  },
  {
    tetle: "业务员",
    worker1: "张三",
    worker2: "李四",
    worker3: "王五",
    worker4: "驴子",
  },
  {
    tetle: "流程状态",
    zhuangtai1: "待提交",
    zhuangtai2: "待提交",
    zhuangtai3: "待提交",
    zhuangtai4: "待提交",
  },
  {
    tetle: "任务开始时间",
    time1: "2023.04.06",
    time2: "2019.04.06",
    time3: "2021.04.06",
    time4: "2020.04.06",
  },
  {
    tetle: "操作",
  },
];
</script>

<style scoped>
.Extensiona1 {
  width: 100%;
}
.Extensiona1 .el-button {
  font-weight: 700;
}
.Extensiona2 {
  padding: 20px;
  width: 100%;
  height: 40%;
}
.Extensiona2 input {
  margin-left: 10px;
  text-decoration: none;
}
.Extensiona2 > select {
  margin-left: 10px;
  color: gray;
}
.Extensiona2 button {
  margin-left: 10px;
  background: skyblue;
  color: #fff;
  cursor: pointer;
}
.Extensiona3 {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  justify-content: space-around;
  margin-top: 10px;
  line-height: 25px;
  background: rgb(240, 235, 235);
}
.Extensiona4 {
  width: 150px;
  height: 100%;
  /* background: gray; */
  text-align: center;
}
.Extensiona5 p {
  color: rgb(165, 164, 164);
}
.Extensiona5 p:hover {
  background: skyblue;
  cursor: pointer;
}
.Extensiona6 {
  position: absolute;
  right: 111px;
  /* background: red; */
  top: 216px;
  cursor: pointer;
}
.Extensiona7 {
  position: absolute;
  right: 50px;
  /* background: red; */
  top: 216px;
  cursor: pointer;
}
.Extensiona8 {
  position: absolute;
  right: 111px;
  /* background: red; */
  top: 255px;
  cursor: pointer;
}
.Extensiona9 {
  position: absolute;
  right: 50px;
  /* background: red; */
  top: 255px;
  cursor: pointer;
}
.Extensiona10 {
  position: absolute;
  right: 111px;
  top: 300px;
  cursor: pointer;
}
.Extensiona11 {
  position: absolute;
  right: 50px;
  top: 300px;
  cursor: pointer;
}
.Extensiona12 {
  position: absolute;
  right: 111px;
  top: 340px;
  cursor: pointer;
}
.Extensiona13 {
  position: absolute;
  right: 50px;
  top: 340px;
  cursor: pointer;
}
.Extensiona14 {
  width: 100%;
  height: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  line-height: 50px;
}
.Extensiona15 {
  width: 100px;
  height: 100%;
}
.button {
  text-decoration: none;
}
</style>